<template>
    <div ref="blog-root" style="width: 100vw;">
        <transition appear name="animate__animated animate__bounce" enter-active-class="animate__zoomIn">
            <el-container>
                <el-main>
                    <div class="main-top">{{ homeText }}<span class="cursor"></span></div>
                </el-main>
            </el-container>
        </transition>
        <el-container class="container">
            <el-aside class="hidden-xs-only content" style="text-align: center;">
                <el-card class="box-card-aside" shadow="hover">
                    <div slot="header" class="clearfix">
                        <h4 style="margin-bottom: 10px;">今天是{{ dayOfWeek }}</h4>
                        <p style="font-size: small; font-family: cursive">祝你拥有美好的一天！</p>
                    </div>
                    <div class="item-aside" v-for="item in articleTypeList" :key="item.id"
                        :class="{ active: selectedType === parseInt(item.id) }" @click="queryDateList(item)">
                        {{ item.name }}
                    </div>
                    <div class="item-aside" :class="{ active: selectedType === null }"
                        @click="queryDateList({ type: null, id: null })">
                        全部
                    </div>
                </el-card>
            </el-aside>
            <el-main>
                <!-- <transition-group name="animate__animated animate__fadeIn" enter-active-class="animate__fadeIn"> -->
                <transition-group appear name="animate__animated animate__bounce" enter-active-class="animate__zoomIn"
                    leave-active-class="animate__zoomOut">
                    <el-card class="box-card-main" shadow="hover" v-for="item in articleList" :key="item.id"
                        :body-style="{ padding: '0px' }" @click.native="toArticleInfo(item.id)">
                        <img :src="item.cover" class="image">
                        <div style="padding: 14px;" class="text-main item-main">
                            <h2 style="margin-bottom: 20px;">{{ item.title }}</h2>
                            <p>{{ item.digest }}</p>
                        </div>
                        <div class="text-bottom">
                            <span class="el-icon-user"> 作 者: {{ item.nickName }}</span>
                            <span class="el-icon-date"> 创建时间: {{ item.createTime }}</span>
                            <span class="el-icon-view"> 浏 览 量: {{ item.pageView }}</span>
                        </div>
                    </el-card>
                </transition-group>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="page" :page-size="pageSize" layout="prev, pager, next" :total="total"
                        align="center" background>
                    </el-pagination>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import AppLogo from '~/components/AppLogo.vue'
import BlogHeader from '~/pages/layouts/BlogHeader.vue';
import BlogFooter from '~/pages/layouts/BlogFooter.vue';
import dict from '~/api/dict';
import article from '~/api/article'
export default {
  transition: 'fade',
  components: {
    AppLogo,
    BlogHeader,
    BlogFooter
  },
  data() {
    return {
      homeText: '', // 首页文字
      timer: null, // 计时器变量
      value: '',
      articleTypeList: [],
      selectedDate: '',
      dayOfWeek: '',
      total: 0, // 文章总数
      pageSize: 3, // 每页总数
      page: 1, // 当前页
      articleList: [],
      articleObj: {
        type: null
      },
      selectedType: null,
    };
  },
  methods: {
    queryDateList(item){
      this.getArticleList(this.page, this.pageSize, {type: parseInt(item.value)})
      this.selectedType = item.id
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getArticleList(this.page, this.pageSize, this.articleObj);
    },
    // 获取当前页
    handleCurrentChange(val) {
      this.page = val
      this.getArticleList(this.page, this.pageSize, this.articleObj);
    },
    getArticleList(page, pageSize, obj) {
      article.getArticleList(page, pageSize, obj).then(res => {
        this.articleList = res.data.rows
        this.total = res.data.total
      })
    },
    // 获取文章类型
    getArticleType(code) {
      dict.getBlogDictByCode(code).then(res => {
        this.articleTypeList = res.data
      })
    },
    // 监听body滚动条的方法，根据滚动条模糊背景
    handleScroll() {

      let scrollTop = window.pageYOffset || document.documentElement.scrollTop ||
        document.body.scrollTop
      if (scrollTop > 150) {
        this.$refs["blog-root"].style.backdropFilter = 'blur(10px)';
      } else {
        this.$refs["blog-root"].style.backdropFilter = 'blur(0px)';
      }
    },
    toArticleInfo(id) {
      // this.$router.push('/article/info?articleId=' + id);
      this.$router.push({ 
        path: '/article/info',
        query: { articleId: id }
      })    
        // window.open('/article/info?id=' + id, '_blank');
    },  

    // 打字动画函数
    startTyping() {
      const message = '欢迎来到绫三的博客社区!'; // 要打字显示的文字
      let i = 0;
      this.timer = setInterval(() => {
        this.homeText = this.homeText + message.charAt(i);
        i++;
        if (i > message.length - 1) {
          clearInterval(this.timer);
        }
      }, 200); // 控制打字速度，单位为毫秒
    },
    getDayOfWeek() {
      let date = new Date();
      let weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
      this.dayOfWeek = weekdays[date.getDay()];
    }
  },
  mounted() {
    this.getArticleList(0, this.pageSize, this.articleObj);
    this.startTyping();
    window.addEventListener('scroll', this.handleScroll)
    this.getArticleType('reception_article_type');
    this.getDayOfWeek()
    this.$bus.$on("getArticleList", data => {
      
      this.getArticleList(0, this.pageSize, data);
    })
  },
  beforeDestroy() {
    this.$bus.$off("getArticleList");
    window.removeEventListener('scroll', this.handleScroll)
    if (this.timer) {
      clearInterval(this.timer);
    }
  }

}
</script>

<style scoped>
.active {
  color: #a31f34;
  font-weight: 600;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.content {
    height: 100%;
    position: sticky;
    top: 60px;
    width: 300px;
}


::v-deep .btn-prev, ::v-deep .btn-next, ::v-deep .btn-quicknext, ::v-deep .number, ::v-deep .btn-quickprev{
  background-color: #1b1e24 !important;
  color: #cbcbd1 !important;
}

::v-deep .block .active{
  background-color: #a31f34 !important;
  color: #1b1e24 !important;
}
.text-bottom {
  float: right;
  margin-right: 2%;
  margin-bottom: 1%;
  font-size: xx-small;
  color: #7f808c;
}

.text-bottom span {
  margin-right: 10px;
}

.image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}


/* 光标闪烁动画 */
@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* 光标样式 */
.cursor {
  display: inline-block;
  width: 3px;
  height: 36px;
  background-color: wheat;
  vertical-align: sub;
  animation: blink .7s infinite;
  margin-left: 2px;
}

.v-enter {
  opacity: 0;
  transform: translateY(10px);
}

.v-enter-active {
  transition: all 0.5s;
}

.v-leave-active {
  transition: all 0.5s;
  opacity: 0;
  transform: translateY(-10px);
}

.item-aside {
  padding: 10px 0;
  font-size: 20px;
  font-family: fantasy
  /* background-color: #2f3740; */

}

.item-aside:hover {
  color: #a31f34;
  background-color: #212226;
  border-radius: 10px;
}

.box-card-aside {
  height: auto;
  width: 80%;
  /* width: 15%; */
  margin-bottom: 20px;
  margin-top: 20px;
  margin-left: 55px;
  background-color: #1b1e24;
  border: 2px #2f3740 solid;
  border-radius: 20px;
  box-shadow: rgba(255, 255, 255, 0.05) 0px 6px 24px 0px, rgba(255, 255, 255, 0.08) 0px 0px 0px 1px;
  color: #cbcbd1;
  position: sticky;
  top: 0;
}

.text-main {
  font-size: 14px;
}

.item-main {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card-main {
  margin-left: 3%;
  width: 95%;
  /* margin-left: 22%;
  width: 75%; */
  background-color: #1b1e24;
  border: 2px #2f3740 solid;
  border-radius: 20px;
  box-shadow: rgba(255, 255, 255, 0.05) 0px 6px 24px 0px, rgba(255, 255, 255, 0.08) 0px 0px 0px 1px;
  color: #cbcbd1;
  margin-bottom: 20px;
}

.el-container {
  /* height: 100%; */
}

/* .el-header {
  padding: 0;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 30, 0.7);
}

.el-footer {
  background-color: transparent;
  color: #333;
  text-align: center;
  line-height: 60px;
  padding: 0;
} */

.el-main {
  height: 100%;
}

body>.el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.main-top {
  color: #d1d1b6;
  font-size: xx-large;
  height: 650px;
  line-height: 500px;
  text-align: center;
}
</style>